<template>
  <div>
      <el-icon size="50" color="red">
          <House />
      </el-icon>
      <el-icon size="50" color="green">
        <CircleCheck />
      </el-icon>
       <el-table :data="state.tableData" style="width: 100%">
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
      </el-table>
  </div>
</template>


<script setup>
  //  使用elmentplus的图标 
  import {House,CircleCheck} from '@element-plus/icons-vue'
  // 
  import {ref,reactive} from 'vue'

  let state=reactive({
          tableData:[
        {
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-02',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-04',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
      ]
  })

</script>